import opt2 from './option2';
import echarts from "echarts";

function ChartType2(chart) {

  this.position = [];

  this.updateSize(chart);

  window.addEventListener('resize', () => {
    // update
    this.updateSize(chart);
    // draw
    this.draw(chart);
  });

  this.draw(chart)

}

ChartType2.prototype.updateSize = function (chart) {
  let w = chart.getWidth();
  let h = chart.getHeight();
  let lineWidth = 2;


  this.r = w / 2 * 0.6;
  this.r0 = this.r - lineWidth;
  this.cx = w / 2;
  this.cy = h / 2;

  let centerX = w / 2;
  let centerY = h / 2;

  this.position[0] = [centerX, centerY - this.r0 + lineWidth / 2, "#7844FF"];
  this.position[1] = [centerX + this.r0 + lineWidth / 2, centerY, "#A043FF"];
  this.position[2] = [centerX, centerY + this.r0 + lineWidth / 2, "#7B44FF"];
  this.position[3] = [centerX - this.r0 + lineWidth / 2, centerY, "#5743FF"];
}

ChartType2.prototype.draw = function (chart) {

  let position = this.position;

  // 渐变
  let gradient = new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
    { offset: 0, color: "#5043FF" },
    { offset: 1, color: "#A043FF" }
  ]);

  let graphic = [
    {
      type: "ring",
      shape: {
        cx: this.cx,
        cy: this.cy,
        r: this.r,
        r0: this.r0
      },
      style: {
        fill: gradient
      }
    }
  ];

  for (let i = 0; i < position.length; i++) {
    let pos = position[i];
    graphic.push({
      type: "circle",
      shape: {
        cx: pos[0],
        cy: pos[1],
        r: 10
      },
      style: {
        fill: pos[2]
      }
    });
  }

  chart.setOption(opt2);
  chart.setOption({
    graphic: graphic
  });
}



export default ChartType2;
